<template>
	<view class="page">
		<v-header title="会议室预定" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<view class="makeConferenceContainer">
				<!--步骤条-->
				<view class="steps f fc">
					<view class="stepsli" v-for="(item, index) in SetData" :key="index" :class="{ active: Steps === index }">{{ item }}</view>
				</view>
				<!-- 会议室概况介绍 -->
				<view class="descCont" v-if="Steps == 0 || Steps == 2">
					<view class="imgview"><image src="../../static/img/active-list.png" mode="aspectFill"></image></view>
					<view class="title f">会议室</view>
					<view class="bota">
						<view class="desc f">
							<view class="label ">位 置：</view>
							世宁大厦17层
						</view>
						<view class="desc f ">
							<view class="label">面 积：</view>
							22平米
						</view>
						<view class="desc f">
							<view class="label">容 量：</view>
							10人以下
						</view>
						<view class="desc f">
							<view class="label">家具配置：</view>
							会议桌+4把椅子
						</view>
						<view class="desc f">
							<view class="label">地面材料：</view>
							地毯
						</view>
					</view>
				</view>
				<!-- 选择预订时间 -->
				<view class="descCont" v-if="Steps == 1">
					<!-- 日期 -->
					<view class="cont">
						<view class="title"><text class="left">使用日期</text></view>
						<view class="dateCont f fb">
							<view class="preDay" @click="prevDate">
								<text class="cuIcon-back"></text>
								前一天
							</view>
							<view class="toDay">{{ selDateTimes }}</view>
							<view class="nextDay" @click="nextDate">
								后一天
								<text class="cuIcon-right"></text>
							</view>
						</view>
					</view>

					<view class="title">
						<text class="left">会议室</text>
						<text class="right">世宁大厦17层</text>
					</view>
					<!-- 时间 -->
					<view class="bottom f ">
						<view
							class="timecont  f fc fn"
							:class="[{ disTime: item.status != 0 }, { actTime: item.status == 2 }]"
							v-for="(item, index) in dataArray"
							:key="index"
							@click="dateTap(item, item.status)"
						>
							<view class="time">{{ item.time }}</view>
							<view class="date">{{ item.status == 0 ? '可预约' : item.status == 1 ? '已预约' : item.status == 2 ? '已选中' : '暂无数据' }}</view>
						</view>
					</view>
					<view class="bota">
						<view class="tip">
							您本周的本楼层会议室剩余可预订额度为:
							<text class="bold1">6小时</text>
						</view>
						<view class="tip">
							预订时间 :
							<text class="bold1">00:00 至 00:00</text>
						</view>
					</view>
				</view>
				<!-- 提交预订申请 -->
				<view class="descCont" v-if="Steps == 2">
					<view class="bota borderTop">
						<view class="desc f">
							<view class="label">预订时间：</view>
							<text class="time">2021-2-8 9:00 - 11:00</text>
						</view>
						<view class="desc f">
							<view class="label">人数：</view>
							<input class="fl inputl" type="text" value="" v-model="querys.num" placeholder="请输入人数" />
						</view>
						<view class="desc f ">
							<view class="label">主题：</view>
							<input class="fl inputl" type="text" value="" v-model="querys.theme" placeholder="请输入主题" />
						</view>
						<view class="desc f">
							<view class="label">备注：</view>
							<textarea class="fl textl" value="" placeholder="请输入备注" v-model="querys.mark" />
						</view>
					</view>
				</view>
				<view class="f fa">
					<view class="preStep f fc" @click="goPre(0)">{{ preText }}</view>
					<view class="preStep f fc" @click="goPage(0)">{{ nextText }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			h: this.$h,
			Steps: 0,
			SetData: ['会议室概况介绍', '选择预订时间', '提交预订申请'],
			//status:0 可预定；status:1 已预定；
			dateIndex: 0,
			dataArray: [
				{ status: 0, time: '09:00~10:00' },
				{ status: 0, time: '10:00~11:00' },
				{ status: 1, time: '11:00~12:00' },
				{ status: 0, time: '12:00~13:00' },
				{ status: 1, time: '13:00~14:00' },
				{ status: 0, time: '14:00~15:00' },
				{ status: 1, time: '15:00~16:00' },
				{ status: 0, time: '16:00~17:00' }
			],
			choseTimeArray: [],
			//使用日期
			selDateTimes: '',
			preText: '返回',
			nextText: '下一步'
		};
	},
	mounted() {
		let date = new Date();
		let seperator1 = '-'; //年月日之间的分隔
		let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1; //获取月,如果小于10,前面补个0
		let strDate = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); //获取日,如果小于10,前面补个0
		let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
		this.selDateTimes = currentdate;
	},
	watch: {
		// data（）函数只是在初始化的时候会运行一次。所以总是空。而我们异步过来的数据，需要watch他 才能得到。
		Steps: function(newVal, oldVal) {
			console.log('xin', newVal);
			console.log('old', oldVal);
			if (newVal == 0) {
				this.preText = '返回';
				this.nextText = '下一步';
			} else if (newVal == 1) {
				this.preText = '上一步';
				this.nextText = '下一步';
			} else if (newVal == 2) {
				this.preText = '上一步';
				this.nextText = '提交预约申请';
			}
		}
	},

	methods: {
		//下一页
		goPage() {
			if (this.Steps === this.SetData.length - 1) {
				uni.showModal({
					title: '提示',
					content: '是否确认预约当前会议室',
					success: function(res) {
						if (res.confirm) {
							uni.switchTab({
								url: '/pages/home/index'
							});
						} else if (res.cancel) {
						}
					}
				});
				return 0;
			} else {
				return (this.Steps += 1);
			}
		},
		//上一页
		goPre() {
			if (this.Steps === 0) {
				uni.navigateBack({
					delta: 1
				});
				return this.SetData.length - 1;
			} else {
				return (this.Steps -= 1);
			}
		},
		//选时间
		dateTap(item, status) {
			if (status == 1) {
				//不可选
				return false;
			} else if (status == 0) {
				//可选
				item.status = 2;
				if (item.status == 2) {
					this.choseTimeArray.push(item);
				}
			} else {
				item.status = 0;
				this.choseTimeArray.splice(this.choseTimeArray.indexOf(item), 1); // 反选之后删除选中的数组
			}
			console.log('选中的数字', this.choseTimeArray);
		},
		//使用日期
		prevDate() {
			//前一天
			let odata = new Date(new Date(this.selDateTimes).getTime() - 24 * 60 * 60 * 1000); //计算当前日期 -1
			this.selDateTimes = this.convertToDate(odata); //格式化日期并赋值
		},
		nextDate() {
			//后一天
			let odata = new Date(new Date(this.selDateTimes).getTime() + 24 * 60 * 60 * 1000); //计算当前日期 +1
			this.selDateTimes = this.convertToDate(odata); //格式化日期并赋值
		},
		convertToDate(date) {
			var date = new Date(date);
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			m = m < 10 ? '0' + m : m; //月小于10，加0
			d = d < 10 ? '0' + d : d; //day小于10，加0
			return y + '-' + m + '-' + d;
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/style/conference.scss';
</style>
